<template>
    <div>
      <jxf-titletip :title="title" :hasGoBack="true" :hasRefresh="false" @goBack="$emit('goBack')"></jxf-titletip>
      <div class="jxf-content mt20">
        <el-card class="jxf-table-card mt10">
          <div slot="header" class="clearfix">
            <span>{{title}}</span>
          </div>
          <div class="listArea">
            <el-form :model="cityManngeInfo" ref="cityManngeInfo" :rules="rules">
              <el-form-item label="方案名称:" prop="accountName" required>
                <el-input v-model="cityManngeInfo.accountName" maxlength="25" clearable :disabled="dataInfo.pageType === '1'"></el-input>
              </el-form-item>
              <el-form-item label="城市选择:" prop="cityId" required>
                <AreaInput :searchInfo.sync="cityManngeInfo" :isDisable="dataInfo.pageType === '1'"></AreaInput>
              </el-form-item>
              <el-form-item label="星级对应账期设置:" required>
                <el-table
                  :data="tableData3"
                  style="width: 100%">
                  <el-table-column
                    prop="starName"
                    label="月度"
                    width="150">
                  </el-table-column>
                  <el-table-column label="设置费率">
                    <el-table-column
                      label="对应月份费率">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.rate" :max="100" :min="0" :disabled="dataInfo.pageType === '1'">
                          <template slot="append">%</template>
                        </el-input>
                        <i class="c-red" v-if="scope.row.numWrong === 1">请输入两位小数以内的正数</i>
                        <i class="c-red" v-if="scope.row.numWrong === 2">费率不能大于100</i>
                      </template>
                    </el-table-column>
                  </el-table-column>
                </el-table>
                <i class="el-icon-plus addPeriod" @click="addPeriod" v-if="dataInfo.pageType !== '1'"></i>
              </el-form-item>
              <el-form-item label="备注说明:">
                <el-input
                  v-model="cityManngeInfo.remark"
                  autocomplete="off"
                  type="textarea"
                  maxlength="150"
                  :autosize="{ minRows: 4, maxRows: 6}"
                  placeholder="备注" :disabled="dataInfo.pageType === '1'"></el-input>
                <p class="textAreaMsg">({{cityManngeInfo.remark ? cityManngeInfo.remark.length : 0}}/150)</p>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm" v-if="dataInfo.pageType !== '1'">确认</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </div>
    </div>
</template>

<script>
    export default {
        name: "CityManagement",
        props: {
          dataInfo: {
            type: Object,
            default: () => {}
          },
          title: {
            type: String,
            default: "城市与账期管理"
          },
          url: {
            type: String,
            default: ''
          }
        },
        data() {
          return {
            cityManngeInfo: {
              provinceId: this.dataInfo.provinceId,
              cityId: this.dataInfo.cityId,
              accountName: this.dataInfo.accountName,
              remark: this.dataInfo.remark
            },
            rules: {
              accountName: [
                { required: true, message: '方案名称不能为空', trigger: ['blur', 'change'] },
              ],
              cityId: [
                { required: true, message: '城市选择不能为空', trigger: ['blur', 'change'] },
              ],
              remark: [
                { required: true, message: '备注不能为空', trigger: ['blur', 'change'] },
                { min: 1, max: 150, message: '长度不能超过150个字', trigger: ['blur', 'change'] }
              ]
            },
            tableData3: this.dataInfo && this.dataInfo.supplierSchemeStarVoList ? this.dataInfo.supplierSchemeStarVoList : []
          }
        },
        methods: {
          handleClose(done) {
            this.resetForm()
            done()
          },
          resetForm() {
            this.tableData3 = []
            this.$refs['cityManngeInfo'].resetFields()
          },
          // 加账期
          addPeriod() {
            this.tableData3.push({
              rate: "",
              starName:  '*N+' + this.tableData3.length,
              createTime: "",
              createrId: "",
              id: "",
              schemeId: "",
              updateTime: "",
              updaterId: "",
              numWrong: 0
            })
          },
          submitForm() {
            this.$refs['cityManngeInfo'].validate((valid) => {
              if(valid) {
                if(this.tableData3.length == 0) {
                  this.$notify({
                    title: '警告',
                    message: '账期与费率设置不能为空',
                    type: 'warning'
                  });
                  return false
                }
                // 判断返利是否有空值
                let isNull = false
                // 数组对象深拷贝
                let tableInfo = this.tableData3.map(item =>{
                  return {...item}
                })
                tableInfo.forEach(item => {
                  if(item.rate !== "" && (item.numWrong === undefined || item.numWrong === 0)) {
                    if(item.rate != "0" ) {
                      item.rate = Math.round(item.rate * 100) / 10000
                    }
                  } else {
                    isNull = true;
                  }
                  item.starName = item.starName.substring(3, item.starName.length)
                })
                if(isNull) {
                  return false;
                }
                let data = {
                  facSupplyScheme: {
                    cityId: this.cityManngeInfo.cityId,
                    accountName: this.cityManngeInfo.accountName,
                    count: "",
                    createTime: "",
                    createrId: "",
                    id: this.dataInfo.id,
                    remark: this.cityManngeInfo.remark,
                    updateTime: "",
                    updaterId: ""
                  },
                  supplyStarList: tableInfo
                }
                ajax.post(this.url, data).then(res => {
                  if(res.code === "10000000") {
                    this.$message({
                      type: 'success',
                      message: '操作成功'
                    });
                    this.resetForm()
                    this.$emit('fresh')
                    this.$emit('goBack')
                  } else {
                    this.tableData3.map((item, index) => {
                      item.starName = '*N+' + item.starName
                      item.rate = item.rate ? Math.round(item.rate * 100000) / 1000 : item.rate
                    });
                    this.$message.error(res.message)
                  }
                })
              }
            })

          }
        },
        watch: {
          tableData3: {
            handler(curVal,oldVal){
              let reg = /^\d+(\.\d{0,2})?$/
              this.tableData3.map((item, index) => {
                if(reg.test(item.rate)) {
                  if(parseInt(item.rate) > 100) {
                    item.numWrong = 2;
                  } else {
                    item.numWrong = 0;
                  }
                } else {
                  item.numWrong = 1
                }
              })

            },
            deep:true
          }
        }
    }
</script>

<style lang="scss" scoped>
.el-form {
  max-width: 900px;
  min-width: 500px;
  .el-input {
    width: 300px;

  }
  .textAreaMsg {
    width: 100%;
    text-align: right;
  }
}
</style>
